<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加菜品</title>
    <#assign base=request.contextPath/>
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <script src="${base}/backstage/layui/layui.js?t=1"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/backstage/js/feng.js?t=1"></script>
    <script src="${base}/backstage/js/loading.js?t=1"></script>
</head>
<body>

<br>
<form class="layui-form " action="" style="padding-left: 15px;">

    <br>
    <div class="layui-upload-drag" id="test10"  style="position: relative;left:7%">
        <div  id="uploadDemoView">
        </div>
        <i class="layui-icon"></i>
        <p>点击上传上商品主图，或将文件拖拽到此处</p>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input class="layui-input" name="commodityName" id="commodityName" placeholder="请输入商品名称" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜品分类</label>
        <div class="layui-input-block">
            <select name="classification" id="classification" lay-verify="required" lay-search="">
                <option value="">请选择菜品分类</option>
                <#list varietyClassification as varietyClassification>
                    <option value="${varietyClassification.id}">${varietyClassification.varietyName}</option>
                </#list>
            </select>
        </div>
    </div>

    <div class="layui-collapse" lay-accordion="" lay-filter="test">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">添加菜品</h2>
            <div class="layui-colla-content layui-show">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>




    <div align="center">
        <button type="button" class="layui-btn" id="saveButton">保存</button>
        <button type="button" class="layui-btn" onclick="window.history.back(-1);">返回</button>
    </div>
    <br>
    <br>
</form>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">


    <form class="layui-form " action="">



        <div class="layui-form-item">
            <label class="layui-form-label">选择规格</label>
            <div class="layui-input-block">
                <select name="commoditySpecifications" id="commoditySpecifications" lay-verify="required" lay-search="">
                    <option value="">请选择商品规格</option>
                    <option value="2">份量</option>
                    <option value="1">杯量</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择类型</label>
            <div class="layui-input-block">
                <select name="type" id="type" lay-verify="required" lay-search="">
                    <option value="">请选择商品类型</option>
                    <option value="1">大</option>
                    <option value="2">中</option>
                    <option value="3">小</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-block">
                <input class="layui-input" name="price" id="price" placeholder="请输入单价" autocomplete="off">
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">属性分类</label>
            <div class="layui-input-block">
                <select name="attributeClassificationId" lay-filter="attributeClassificationId" id="attributeClassificationId" lay-verify="required" lay-search="">
                    <option value="">请选择属性分类</option>
                    <#list attributeClassification as attributeClassification>
                        <option value="${attributeClassification.id},${attributeClassification.attributeClassification}">${attributeClassification.attributeClassification}</option>
                    </#list>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">属性</label>
            <div class="layui-input-block">
                <select name="attributeId" id="attributeId" lay-verify="required" lay-search="">

                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <select name="onTheShelf" id="onTheShelf" lay-verify="required" lay-search="">
                    <option value="">请选择是否上架</option>
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
            </div>
        </div>





        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
                <textarea class="layui-input" style="height: 90px;" name="commodityDescribe" id="commodityDescribe"
                          autocomplete="off"></textarea>
            </div>
        </div>




        <div class="layui-form-item" style="text-align: center">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn" lay-event="add">添加</button>
            </div>
        </div>
    </form>

</script>



<script>


    var param = "";
    layui.use(['form', 'layer', 'upload','table'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;
        var table = layui.table;


        form.on('select(attributeClassificationId)', function(data) {
            var a = data.value.split(",");
            var attributeClassificationId = "";
            for (let i = 0; i < a.length-1; i++) {
                attributeClassificationId+=a[0];
            }
            $.ajax({
                type: "get",
                url: "${base}/publicClass/selectByAttributeClassificationId",
                data: {attributeClassificationId:attributeClassificationId},
                success: function (data) {
                    if (data.code === 200) {
                        $("#attributeId").html("")
                        $("#attributeId").append(
                            '<option value="">请选择属性</option>'
                        )
                        for (let i = 0; i < data.data.length; i++) {
                            $("#attributeId").append(
                                '<option value="'+data.data[i].id+","+data.data[i].attribute+'">'+data.data[i].attribute+'</option>'
                            )
                        }
                    }
                    form.render(); //更新全部
                }
            });

        })


        //拖拽上传
        layui.upload.render({
            elem: '#test10'
            ,url: '${base}/file/uploadFile' //改成您自己的上传接口
            , before: function (obj) {
                layui.layer.load(); //上传loading
            }
            ,done: function(res){
                layui.layer.closeAll('loading'); //关闭loading
                if (res.code > 0) {
                    return layui.layer.msg('上传失败');
                }
                layui.layer.msg('上传成功');
                $("#uploadDemoView").html("")
                $('#uploadDemoView').append('<div><img src="' + res.data + '" style="width: 342px;height: 136px"></div>'); //图片链接（base64）
                $("#test10 i").remove()
                $("#test10 p").remove()
                param += res.data;
            }
        });

        //表格
        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            ,data:[]
            , cols: [[
                {field: 'price', title: '价格'},
                {field: 'commoditySpecifications', title: '商品规格',templet:function(val){
                        if(val.commoditySpecifications==undefined){
                            return "";
                        };
                        if(val.commoditySpecifications==1){
                            return "杯量";
                        };
                        if(val.commoditySpecifications==2){
                            return "份量";
                        }

                    }},
                {field: 'type', title: '类型',templet:function(val){
                        if(val.type==undefined){
                            return "";
                        };
                        if(val.type==1){
                            return "大";
                        };
                        if(val.type==2){
                            return "中";
                        };
                        if(val.type==3){
                            return "小";
                        }

                    }},
                {field: 'onTheShelf', title: '是否上架',templet:function(val){
                        if(val.onTheShelf==undefined){
                            return "";
                        };
                        if(val.onTheShelf==1){
                            return "是";
                        };
                        if(val.onTheShelf==2){
                            return "否";
                        }

                    }},
                {field: 'attributeClassificationName', title: '属性分类'},
                {field: 'attributeName', title: '属性'},
                {field: 'commodityDescribe', title: '商品描述'},

                {field: '', title: '操作',toolbar: '#barDemo'},
            ]]
            , id: 'testReload'
            ,limits:[999999]
            ,limit:999999
        });

        //添加
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':

                    if($("#price").val()==""){
                        layer.msg("单价不能为空")
                        return
                    }

                    if($("#commoditySpecifications").val()==""){
                        layer.msg("选择规格不能为空")
                        return
                    }
                    if($("#type").val()==""){
                        layer.msg("类型不能为空")
                        return
                    }
                    if($("#onTheShelf").val()==""){
                        layer.msg("是否上架不能为空")
                        return
                    }
                    if($("#attributeClassificationId").val()==""){
                        layer.msg("属性分类不能为空")
                        return
                    }
                    if($("#attributeId").val()==""){
                        layer.msg("属性不能为空")
                        return
                    }


                    var a = $("#attributeClassificationId").val().split(",");
                    let attributeClassificationName = "";
                    let attributeClassificationId = "";
                    for (let i = 0; i < a.length-1; i++) {
                        attributeClassificationId+=a[0]
                        attributeClassificationName+=a[1]
                    }

                    var a = $("#attributeId").val().split(",");
                    let attributeName ="";
                    let attributeId ="";
                    for (let i = 0; i < a.length-1; i++) {
                        attributeId+=a[0]
                        attributeName+=a[1]
                    }



                    var prodJson = {
                        price: $("#price").val(),
                        commoditySpecifications: $("#commoditySpecifications").val(),
                        onTheShelf: $("#onTheShelf").val(),
                        attributeClassificationId: attributeClassificationId,
                        type: $("#type").val(),
                        attributeId: attributeId,
                        commodityDescribe: $("#commodityDescribe").val(),
                        attributeClassificationName: attributeClassificationName,
                        attributeName: attributeName
                    }
                    layui.table.cache.testReload.push(prodJson);
                    table.reload('testReload',{
                        data: layui.table.cache.testReload
                    });
                    break;
            };
        });
        //删除表格数据
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });


    })


    $("#saveButton").on("click", function () {

        if(param==""){
            layer.msg("商品主图不能为空")
            return
        }
        if($("#commodityName").val()==""){
            layer.msg("商品名称不能为空")
            return
        }
        if($("#classification").val()==""){
            layer.msg("菜品分类不能为空")
            return
        }

        var formDate = {
            commodityName:$("#commodityName").val(),
            classification:$("#classification").val(),
            commodityUrl:param,
            prods:JSON.stringify(layui.table.cache.testReload)
        }

        $.ajax({
            type: "POST",
            url: "${base}/commodity/save",
            data: formDate,
            beforeSend: function () {
                loading("数据提交中，请稍后......");
            },
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg)
                    window.location.href = "${base}/commodity/commodity.html"
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    })

</script>

</body>
</html>